<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
        <a-input v-model:value="formState.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="广告图片" name="image" :rules="[{ required: true, message: '请选择' }]">
        <a-form-item-rest>
          <app-upload :fileList="formState.image" :min="1" @upload-img="uploadImg" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="跳转路径" name="adv_path">
        <a-input v-model:value="formState.adv_path" placeholder="请输入跳转路径" />
      </a-form-item>
      <a-form-item label="跳转链接" name="adv_link">
        <a-radio-group v-model:value="formState.adv_link">
          <a-radio :value="1">内部页面</a-radio>
          <a-radio :value="2">H5页面</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="类型" name="adv_type" :rules="[{ required: true, message: '请选择类型' }]">
        <a-radio-group v-model:value="formState.adv_type">
          <a-radio :value="1">banner</a-radio>
          <a-radio :value="2">nav</a-radio>
          <a-radio :value="3">一行2个广告图</a-radio>
          <a-radio :value="4">一整行</a-radio>
          <a-radio :value="5">首页顶部</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formState.sort" placeholder="请输入排序" style="width: 250px" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { add, edit } from "@/api/admin/adv";
const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();

const formState = reactive({
  name: "",
  sort: 0,
  adv_path: "",
  adv_link: null,
  adv_type: 1,
  image: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑广告" : "新增广告";
  if (model && model.adv_id) {
    resetForm(model);
    formState.image = formState.image
      ? [
        {
          url: formState.image,
        },
      ]
      : [];
  } else {
    resetForm({
      adv_id: null,
      name: "",
      sort: 0,
      adv_path: "",
      adv_link: null,
      adv_type: 1,
      image: [],
    });
  }
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const uploadImg = (val) => {
  formState.image = formState.image.concat(val);
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      ...formState,
      image: formState.image.length > 0 ? formState.image[0].url : "",
    };
    if (formState.adv_id) {
      edit({
        id: formState.adv_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};
defineExpose({
  show,
});
</script>